<template>
  <el-form
    ref="loginform"
    :model="loginFormData"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-loginFormData"
  >
    <el-form-item label="用户名" prop="username" class="app">
      <el-input
        v-model="loginFormData.username"
        type="input"
        autocomplete="off"
        maxlength="11"
      />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="loginFormData.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <span
      class="box"
      v-html="captrue"
      @click="getCaptrueApi"
      v-loading="loading"
    ></span>
    <el-form-item label="验证码" prop="captrue">
      <el-input
        v-model="loginFormData.captrue"
        maxlength="5"
        @keydown.enter="submitForm(loginform)"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(loginform)" class="btn">
        提交
      </el-button>
      <!-- <el-button @click="resetForm(loginform)">Reset</el-button> -->
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ElLoading } from 'element-plus';
//引入路由导航api
import { useRouter } from 'vue-router';
import * as api from '../../api/users';
import { reactive, ref, toRefs, onMounted, onUnmounted } from 'vue';
import { rules, userSubmitForm } from '../../pages/composition/login/validator';
//引入store
import { useUser } from '../../store/users';
let userStore = useUser();
// console.log(userStore);
const loginform = ref();
// let isshow = ref(false);
const loginFormData = reactive({
  username: '',
  password: '',
  captrue: ''
});
let validateSuccess = () => {
  //1.校验之前肯定要先登入
  //2.校验验证码
  VerifyCaptcha(loginFormData.captrue);
  console.log('校验成功');
};
let validateFailed = () => {
  console.log('校验失败');
};
let submitForm = userSubmitForm(validateSuccess, validateFailed);
let router = useRouter();
//声明变量保存获取的验证码
let captrue = ref();
//声明变量存储加载动画的布尔值
let loading = ref();
//封装获取验证码函数
let getCaptrueApi = async () => {
  loading.value = true;

  let res = await api.getCaptrueApi();
  loading.value = false;
  if (res.data.status) captrue.value = res.data.img;
};
//获取完验证码以后进行校验
//1.本地的表单校验通过之后
//2.通过接口校验验证码

let loadingInstance = null;
let VerifyCaptcha = async (captcha) => {
  //校验验证码的时候加载加载动画
  loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0,0,0,.5)'
  });

  try {
    let res = await api.VerifyCaptchaApi(captcha);
    login(loginFormData.username, loginFormData.password);
  } catch (e) {
    console.log(e);
    getCaptrueApi();
    loadingInstance.close();
  }
};

//封装登入请求
let login = async (username, password) => {
  try {
    let res = await api.LoginApi(username, password);
    //登入成功关闭加载动画
    // loadingInstance.close();
    // 如果登入成功保存token
    sessionStorage.setItem('qf-token', res.data.token);
    //保存用户信息
    console.log(res);
    userStore.$patch({ userInfo: res.data.userInfo });
    //按钮权限存到pinia
    userStore.$patch({ permission: res.data.permission });

    //有token以后跳转'/''页面
    router.push('/');
  } catch (e) {
    //登入失败也关闭加载动画
    loadingInstance.close();
    console.log(e);
  }
};
//首次加载时需要调用一次获取验证码接口
onMounted(() => {
  getCaptrueApi();
});
onUnmounted(() => {
  //登入成功关闭加载动画
  loadingInstance.close();
});
</script>

<style scoped>
:deep(.el-form-item__label) {
  color: white;
  /* font-weight: 900; */
}

.btn {
  width: 400px;
  color: blue;
  background-color: hotpink;
}

.box {
  position: absolute;
  top: 276px;
  right: 72px;
  cursor: pointer;
  z-index: 113;
}
</style>
